<template>
  <div class='container'>
    <div class="menu">
      <t-anchor :affix-props="{ offsetTop: 30 }" @click="handleClick" @change="handleChange" class="anchor-menu"
        size="small">
        <template #cursor>
          <div class="test-cursor" />
        </template>
        <t-anchor-item :href="`#${item.anchor}`" :title="item.menu" v-for="(item, index) in menuList" :key="index">
        </t-anchor-item>
      </t-anchor>
    </div>
    <div class="menu-item">
      <div id="scrollable-menu-container">
        <div class="item" :id="item.anchor" v-for="(item, index) in menuList" :key="index">
          <!-- {{ item.menu }} -->
          <t-tabs :default-value="1">
            <t-tab-panel :value="index + 1" :label="tab.tab_name" v-for="(tab, index) in item.sub_menus">
              {{ tab.description }}
              <div class="item-content">
                <div class="item" v-for="(sub_item, index) in tab.tab_sub_menus" :key="index">
                  {{ sub_item }}

                </div>
              </div>
            </t-tab-panel>
          </t-tabs>
        </div>
      </div>
    </div>
  </div>


</template>
<script setup lang="ts">

import { ref, onMounted } from 'vue';
import { getAboutListAPI } from '@/api/about';
const menuList = ref<menuListType[]>([])


interface menuListType {
  anchor: string;
  menu: string;
  sub_menus: {
    tab_name: string;
    description: string;
    tab_sub_menus: string[];
  }[];
}
onMounted(async () => {
  const res = await getAboutListAPI();
  console.log(res);
  menuList.value = res
})

const handleClick = (e: any) => {
  console.log(e)
}
const handleSubClick = (e: any) => {
  console.log(e)
}

const handleChange = (e: any) => {
  console.log(e)
}
</script>
<style lang='scss' scoped>
.container {
  display: flex;
  font-family: "SourceHanSansCN", sans-serif;

  .menu {
    margin-top: 20px;
    width: 125px;
    // background-color: red;

    .anchor-menu {
      width: 20px;
      background-color: yellowgreen;

    }

  }

  .menu-item {

    flex: 1;
    height: 100vh;
    gap: 20px;

    .item-content {
      display: flex;
      flex-wrap: wrap;
      margin: 5px;

      .item {
        margin: 5px;

        .tag {
          margin-right: 5px;
        }
      }
    }
  }
}

.test-cursor {
  width: 10px;
  height: 10px;
  background-color: #0052d9;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  margin-left: -5px;
  top: 50%;
  margin-top: -5px;
}
</style>